<template>
  <div class="detail" style="border: 0px solid red">

<!--      <img src="../../../assets/image/shiyanshebeibanner.png" style="width: 100%; height: auto" />-->

        <el-form :inline="true" :model="params" class="demo-form-inline" label-width="80px" :label-position="left">
          <el-form-item label="所属单位" prop="ldDeptId">
            <treeselect v-model="params.ldDeptId"
                        :options="deptOptions"
                        @input="deptChange"
                        @select="selectDepart"
                        :show-count="true"
                        placeholder="请选择主管部门"
                        style="width: 202px;font-size: 12px;"
            />
          </el-form-item>
          <el-form-item label="实验室" prop="labId">
            <el-select v-model="params.labId" placeholder="请选择实验室" clearable >
              <el-option v-for="dict in labIdOptions"  :key="dict.labId" :label="dict.labName" :value="dict.labId" />
            </el-select>
          </el-form-item>
        <el-form-item label="检测项目" prop="ldType">
          <el-select v-model="params.ldType" placeholder="请选择检测项目" clearable >
            <el-option v-for="dict in ldTypeOptions"  :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
          </el-select>
        </el-form-item>
          <el-form-item label="设备名称">
            <el-input  v-model="params.ldName" placeholder="设备名称"></el-input>
          </el-form-item>
          <el-form-item label="规格型号">
            <el-input  v-model="params.ldSpecifications" style="width: 220px" placeholder="仪器规格"></el-input>
        </el-form-item>
          <el-form-item label="设备状态" prop="status">
            <el-select v-model="params.status" placeholder="请选择设备状态" clearable >
              <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search"  @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

    <div class="workList">
      <div class="ylkt1" v-for="(item,key,index) in workList" :key="index">
        <div class="work">
          <img class="workImg" :src="item.labImageUrl" style="cursor: pointer" alt @click="goto(item.ldId)" :id="0" />
          <div class="work_info">
            <span class="workName">{{ item.ldName }}</span>
            <div class="workInfo">
              <span> 生产厂家：{{ item.ldMadeComp }} </span>
              <span style="height:32px"> 型 号：{{ item.ldSpecifications }}</span>
              <span>所属实验室：{{ item.labName }}</span>
            </div>
            <!-- <el-button type="primary" size="mini" plain>查看详情</el-button> -->
            <div class="btns">
              <a @click.stop="goto(item.ldId)" style="cursor: pointer">查看详情</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
<!--       <Pagination :total="total" :params="params" :current-page="params.pageNum" current-change="handleSizeChange"></Pagination>-->
      <el-pagination style="float:right" @current-change="handleSizeChange" background="true" :page-sizes="[8, 12, 20, 32]" :page-size="8" layout=" prev, pager, next,sizes,jumper" :total="total" hide-on-single-page="true">
      </el-pagination>
    </div>
  </div>
</template>
<script>
// import Pagination from "@/components/Pagination";
import { devicelist, getLabList, treeselect,sysDictData} from "@/api/api";
import router from "@/router/index";
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: {
    // Pagination,
    Treeselect,
  },
  data() {
    return {
      // 总条数
      // 总条数
      //部门
      deptOptions: [],
      labIdOptions: [],
      statusOptions: [{
        dictValue: '',
        dictLabel: '全部状态'
      },{
        dictValue: '0',
        dictLabel: '可用'
      }, {
        dictValue: '1',
        dictLabel: '停用'
      }],
      total: 0,
      form:{

      },
      //  参数
      params: {
        pageNum: 1,
        pageSize: 8,
        ldDeptId: null,
        labIdOptions: [],
        labId: null,
        ldType: null,
        ldName: null,
        status: null,
        ldSpecifications: null,
        ldMadeComp: null,
      },
      workList: [],
      ldTypeOptions:[]
    };
  },
  methods: {
    getLdTypeOptions(dictType){
      let data = {
        dictType: dictType,
      };
      sysDictData(data).then(response => {
        console.log(response)
        if(response.data != null){
          this.ldTypeOptions = response.data;
        }
      })
    },
    goto(id) {
      router.push({
        path: "/equipmentInfo",
        query: {
          id: id,
        },
      });
    },
    deptChange(val){
      if(val != null){
        getLabList(val).then(response => {
          if(response.data != null){
            this.labIdOptions = response.data;
          }else{
            this.labIdOptions.splice(0,this.labIdOptions.length);
            this.params.labId='';
          }
        })
      }else{
        this.labIdOptions.splice(0,this.labIdOptions.length);
        this.params.labId='';
      }
    },
    selectDepart(val){
      this.params.ldDeptId = val.id;
      this.getInDeptLabList();
    },
    //获取实验室
    getInDeptLabList(){
      let deptId = this.params.ldDeptId;
      if(deptId == null || deptId == ''){
        deptId = -1;
      }
      let data = {
        deptId: deptId,
      };
      getLabList(data).then(response => {
        if(response.data != null){
          this.labIdOptions = response.data;
        }else{
          this.labIdOptions.splice(0,this.labIdOptions.length);
          this.params.labId='';
        }
      })
    },
    getTreeselect() {
      treeselect().then(response => {
        if(response.data != null){
          this.deptOptions = response.data;
        }else{
          this.$message.error(response);
        }
      })
    },
    handleSizeChange(e) {
      this.params.pageNum = e;
      this.workList = [];
      this.getList();
    },
    getList() {
      devicelist(this.params).then((res) => {
        this.total = res.total;
        this.workList = res.rows;
      });
    },
    Gohome() {
      this.$router.push("home");
    },
    handleQuery() {
      this.params.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.params.pageNum = 1;
      this.params.ldDeptId = null;
      this.params.labId = null;
      this.params.labIdOptions = null;
      this.params.status = null;
      this.params.ldName = null;
      this.params.ldSpecifications = null;
      this.params.ldMadeComp = null;
      this.params.ldType = null;
      this.handleQuery();
    },
  },
  created() {
    this.getList();
    this.getTreeselect();
     this.getLdTypeOptions("sys_device_type");
  },
};
</script>
<style lang="less" scoped>
.el-form-item{
  margin-bottom: 10px;
}
.workList {
  display: flex;
  flex-wrap: wrap;
  padding-right: 10px;
  margin-top: 10px;
  .ylkt1 {
    width: 25%;
    padding-left: 10px;
    .work {
      width: 100%;
      border: 1px solid #f3f3f3;
      .workImg {
        width: 100%;
        height: 200px;
      }
      .work_info {
        .workName {
          height: 60px;
          font-size: 16px;
          font-weight: bold;
          display: block;
          padding: 10px 10px;
          border-bottom: 1px solid #f3f3f3;
        }
        .workInfo {
          padding: 10px;
          span {
            display: block;
            font-size: 12px;
            margin-bottom: 5px;
          }
          span:nth-child(1) {
          }
        }
        .btns {
          padding: 10px;
          a {
            width: 100%;
            height: 40px;
            background-color: #429aff;
            display: block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #ffffff;
          }
        }
      }
    }
  }
}
.detail {
}
.container {
  width: 100%;
  margin: 0 auto;
}
.title-tab {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 54px;
  cursor: pointer;
}
.red {
  color: red;
}
.zhengwen {
  width: 100%;
  background-color: white;
  padding: 60px;
  box-sizing: border-box;
}
p {
  text-indent: 2em;
  font-size: 16px;
  color: #333333;
  margin-top: 20px;
}
p:nth-child(1) {
  text-indent: 0;
}
h1 {
  text-align: center;
  font-size: 28px;
  color: #333333;
}
.first {
  text-align: center;
  font-size: 16px;
  color: #999999;
  margin-top: 28px;
  margin-bottom: 30px;
}
.daohang {
  margin: 20px 0;
}
.third {
  margin-right: 20px;
}
.jianjiebanner {
  background: url(../../../assets/image/shiyanshebeibanner.png);
}
.ylkt {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  background: rgba(242, 242, 242, 1);
}
.mb-20 {
  margin-bottom: 20px;
}
.picFocus {
  width: 100%;
  height: 120px;
}
.ylkt1 {
  width: 100%;
  padding-bottom: 14px;
}
.module-bgc {
  background-color: white;
}
.ylkt1Img-pic-box {
  width: 100%;
  height: 320px;
  overflow: hidden;
}
.ylkt1Img {
  width: 348px;
  height: 180px;
  margin-top: 10px;
  padding-left: 20px;
  margin-bottom: 8px;
  cursor: pointer;
}
.ylkt1List {
  margin-top: 9px;
  width: 96%;
}
.ylkt1List111:hover {
  background-color: #2a5caa;
  cursor: pointer;
  color: #ffffff;
  span {
    color: #ffffff;
  }
  .spanshebeiinfo {
    color: #ffffff;
  }
}
.spanshebei {
  border: 0px solid red;
  line-height: 60px;
  padding-left: 0px;
  padding-top: 20px;
  color: #444444;
  font-weight: bolder;
  font-size: 16px;
  font-family: "Microsoft YaHei";
}

.spanshebeiinfo {
  border: 0px solid red;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30px;
  font-size: 14px;
  line-height: 25px;
  color: #999999;
  font-family: "Microsoft YaHei";
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
</style>
